<template>
  <div class="box">
    <!--创新创业活动-->
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="班级对比" name="first">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%"
        >
          <el-form-item label="年级:">
            <el-select v-model="firstGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="年份:">
            <el-select v-model="firstYear" placeholder="请选择">
              <el-option
                v-for="item in firstOption.years"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="firstSearch">查询</el-button>
          </el-form-item>
        </el-form>

        <div id="firstChart" style="width: 90%; height: 400px" />

        <!-- 显示年级内班级对比信息 -->
        <el-table
          :data="firstData"
          style="
            width: 90%;
            margin: 0 auto;
            margin-top: 50px;
            padding-bottom: 80px;
          "
          :stripe="true"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.list" :border="true">
                <el-table-column prop="name" label="活动名称" />
                <el-table-column label="时间">
                  <template slot-scope="scope">
                    {{ getDate(scope.row.date) }}
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="活动地点" />
                <el-table-column prop="form" label="活动形式" />
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="班级" prop="class" />
          <el-table-column label="创新创业活动总数" prop="list.length" />
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="历年数据" name="second">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%"
        >
          <el-form-item label="年级:">
            <el-select v-model="secondGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="班级:">
            <el-select v-model="secondClass" placeholder="请选择">
              <el-option
                v-for="item in secondOption.classes"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="secondSearch">查询</el-button>
          </el-form-item>
        </el-form>

        <div id="secondChart" style="width: 1000px; height: 400px" />

        <el-table
          :data="secondData"
          style="
            width: 90%;
            margin: 0 auto;
            margin-top: 50px;
            padding-bottom: 80px;
          "
          :stripe="true"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.list" :border="true">
                <el-table-column prop="name" label="活动名称" />
                <el-table-column label="时间">
                  <template slot-scope="scope">
                    {{ getDate(scope.row.date) }}
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="活动地点" />
                <el-table-column prop="form" label="活动形式" />
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="年份" prop="year" />
          <el-table-column label="创新创业活动总数" prop="list.length" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.box {
  margin: 0 auto;
  padding: 20px;
}
</style>

<script>
import { getGradeClassesYears } from '@/api/gradeClassesYears'
import { getGradeInnovation, getHistoryInnovation } from '@/api/part4/innovation'
export default {
  data() {
    return {
      options: [],
      firstGrade: 2017,
      firstOption: {
        grade: 2017,
        classes: [],
        years: []
      },
      firstYear: 2020,
      firstData: [],
      secondGrade: 2017,
      secondOption: {
        grade: 2017,
        classes: [],
        years: []
      },
      secondClass: '',
      secondData: [],
      activeName: 'first'
    }
  },
  watch: {
    secondGrade: function (val) {
      this.secondOption = this.options.find(function (x) { return x.grade === val })
      this.secondClass = this.secondOption.classes[0]
    },
    firstGrade: function (val) {
      this.firstOption = this.options.find(function (x) { return x.grade === val })
      this.firstYear = this.firstOption.years[0]
    }
  },
  mounted: function () {
    // 获取对应年级班级和年份信息
    getGradeClassesYears().then(response => {
      this.options = response.data.options
      // 初始化first,second
      this.firstGrade = this.options[0].grade
      this.firstYear = this.options[0].years[0]
      this.secondGrade = this.options[0].grade
      this.secondClass = this.options[0].classes[0]
      // 获取原始对比数据
      // 1.年级各班数据
      this.firstSearch()
      // 2.班级历史数据
      this.secondSearch()
      // 处理数据并渲染
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    firstSearch() { // 查询一个年级各班对应的数据
      const data = {
        grade: this.firstGrade,
        year: this.firstYear
      }
      getGradeInnovation(data).then(response => {
        this.firstData = response.data.data
        this.drawFirstChart()
      }).catch(err => {
        console.log(err)
      })
    },
    secondSearch() { // 查询一个班级对应各年份的数据
      const user = this.secondGrade + '级' + this.secondClass + '团支部'
      const data = { user: user }
      getHistoryInnovation(data).then(response => {
        this.secondData = response.data.data
        this.drawSecondChart()
      }).catch(err => {
        console.log(err)
      })
    },
    drawFirstChart() {
      const classes = this.firstData.map(x => { return x.class })
      const numbers = this.firstData.map(x => { return x.list.length }) // 生成数组
      const title = this.firstGrade + '级各班创新创业活动对比'

      // 基于准备好的dom，初始化echarts实例
      const firstChart = this.$echarts.init(document.getElementById('firstChart'))
      // 绘制图表
      firstChart.setOption({
        title: {
          text: title,
          left: 'center',
          color: '#fffff'
        },
        tooltip: {},
        xAxis: {
          data: classes,
          axisLabel: {
            interval: 0,
            rotate: 45, // 倾斜度 -90 至 90 默认为0
            margin: 11,
            textStyle: {
              color: '#fffff'
            }
          }
        },
        yAxis: {
          minInterval: 1
        },
        series: [{
          name: '创新创业活动次数',
          type: 'bar',
          data: numbers,
          barWidth: 30, // 柱图宽度
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = ['#1890ff']
                return colorList[params.dataIndex % colorList.length]
              }
            }
          }
        }
        ]
      })
    },
    drawSecondChart() {
      const years = this.secondData.map(x => { return x.year })
      const numbers = this.secondData.map(x => { return x.list.length }) // 生成数组
      const title = this.secondGrade + '级' + this.secondClass + '创新创业活动历史数据'

      const secondChart = this.$echarts.init(document.getElementById('secondChart'))

      secondChart.setOption({
        title: {
          text: title,
          left: 'center',
          color: '#fffff'
        },
        xAxis: {
          type: 'category',
          data: years
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [{
          data: numbers,
          type: 'line',
          name: '创新创业活动次数',
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#1890ff'
              }
            }
          }
        }]
      })
    },
    getDate(dateStr) {
      if (!dateStr) return '';
      const myDate = new Date(dateStr);
      const year = myDate.getFullYear();
      const month = (myDate.getMonth() + 1 < 10 ? '0' : '') + (myDate.getMonth() + 1);
      const date = (myDate.getDate() < 10 ? '0' : '') + myDate.getDate();
      return `${year}-${month}-${date}`;
    }
  }
}
</script>
